<template>
	<view class="bgw">
		<view class="cu-bar search" style="background-color: rgb(0, 129, 255); color: rgb(255, 255, 255);">
			<view class="cu-avatar round" :style="'background-image:url(' + userInfo.avatarUrl + ')'"></view>
			<!-- <view class="search-form round">
				<text class="cuIcon-search"></text>
				<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索文章" confirm-type="search"></input>
			</view> -->
			<picker @change="pickerChangeShop" :value="shopIndex" :range="shopNameList" class="action">
				<view>
					<text>{{ shopIndex > -1 ? shopNameList[shopIndex] : '请选择小区' }}</text>
					<text class="cuIcon-triangledownfill"></text>
				</view>
			</picker>
		</view>

		<view @click="jumpAppIndexAd">
			<swiper @change="setIndexSwiper" class="screen-swiper round-dot" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500">
				<swiper-item v-for="(item, index) in appIndexAd" :key="index">
					<image :src="'https://img.bestsmartbee.com/' + item.image + '?imageView2/2/w/1000'" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="menu-list">
			<view @click="jumpCuIconList" :data-key="index" v-for="(item, index) in cuIconList" :key="index" class="used-item3">
				<image :src="item.image"></image>
				<view class="aui-grid-label">{{ item.name }}</view>
			</view>
		</view>
		<view style="height: 120upx;"></view>
		<!-- 最近使用 -->

		<!-- <view class="bgw margin-top-20" v-if="leastUrls.length>0">
=======
		<view class="bgw margin-top-20" v-if="leastUrls.length > 0">
>>>>>>> 37807356a26978549155a197fd8421618c6bd364
			<view class="aui-grid">
				<view class="aui-row">
					<view class="least-recently-used bgw mgt10">
						<view v-for="(item, index) in leastUrls" :key="index" class="used-item" @click="jumpSubIconList" :data-key="index">
							<image :src="item.image"></image>
							<view class="aui-grid-label">{{ item.name }}</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 社区公告 -->
		<view class="notiBox" v-if="listData1.length > 0">
			<view class="cu-list menu sm-border" style="border-bottom: 1px solid #eee;;">
				<view class="cu-item arrow">
					<navigator class="content" hover-class="none" url="/pages/topic/list?pid=99&title=通知或公告">
						<text class="cuIcon-noticefill text-orange"></text>
						<text class="text-grey">通知或公告</text>
					</navigator>
				</view>
			</view>
			<view class="cu-list menu-avatar" style="margin-top: 0;">
				<view class="cu-item" :key="index" v-for="(item, index) in listData1" @click="jump(item.type, item.id)">
					<view class="cu-avatar round lg" :style="'background-image:url(' + item.cover + '?imageMogr2/thumbnail/500x);'"></view>
					<view class="content">
						<view class="text-grey">
							<view class="text-cut">{{ item.title }}</view>
						</view>
						<view class="text-gray text-sm flex">
							<view class="text-cut">{{ item.addtime }}</view>
						</view>
					</view>
					<view class="action">
						<!-- <view class="text-grey text-xs">{{item.comment_count}}</view> -->
						<view class="cu-tag round bg-grey sm" v-if="item.comment_count">{{ item.comment_count }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="clear"></view>
		<!-- 社区活动 -->
		<view class="bgw margin-top-20" v-if="listData2.length > 0">
			<view class="cu-list menu sm-border">
				<view class="cu-item arrow">
					<navigator class="content" hover-class="none" url="/pages/topic/list?pid=100&title=政策法规">
						<text class="cuIcon-discoverfill text-orange"></text>
						<text class="text-grey">政策法规</text>
					</navigator>
				</view>
			</view>
			<view class="least-recently-used">
				<view v-for="(item, index) in listData2" :key="index" class="used-item2" @click="jump(item.type, item.id)">
					<view class="cu-list menu-avatar" style="margin-top: 0;">
						<view class="cu-item">
							<view class="cu-avatar round lg" :style="'background-image:url(' + item.cover + '?imageMogr2/thumbnail/500x);'"></view>
							<view class="content">
								<view class="text-grey">
									<view class="text-cut">{{ item.title }}</view>
								</view>
								<view class="text-gray text-sm flex">
									<view class="text-cut">{{ item.addtime }}</view>
								</view>
							</view>
							<view class="action">
								<view class="cu-tag round bg-blue  text-xs" v-if="item.type == 'event'">活动</view>
								<view class="cu-tag round bg-orange  text-xs" v-else-if="item.type == 'vote'">投票</view>
								<view class="cu-tag round bg-green  text-xs" v-else>文章</view>
								<!-- <view class="cu-tag round bg-grey sm" >{{item.comment_count?item.comment_count:0}}</view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="l-line"></view>
			<view class="footer-content">由小蜜蜂智慧服务提供技术支持</view>
			<view class="r-line"></view>
			<view class="clear"></view>
		</view>
	</view>
</template>

<script>
import beeApp from '../../beeApp.js';
export default {
	data() {
		return {
			cuIconList: [
				{
					image: '/static/01.png',
					url: '/pages/bills/bills',
					name: '物业缴费'
				}, {
					image: "/static/02.png",
					url: '/pages/index/shoplist',
					name: '联系我们'
				}, {
					image: "/static/03.png",
					url: '/pages/topic/report',
					name: '投诉建议'
				},{
					image: "/static/11.png",
					url:'/pages/bills/mycars',
					name: '车辆缴费',
				}],
				leastUrls: [{
					image: "/static/08.png",
					url:'/pages/visitor/index',
					name: '访客登记',
				}, {
					image: "/static/11.png",
					url:'/pages/bills/mycars',
					name: '车辆缴费',
				}, {
					image: "/static/12.png",
					name: '到家服务',
				}, {
					image: "/static/10.png",
					name: '天猫生鲜',
				}],
				userInfo:{},
				listData1: [],
				listData2: [],
				shopNameList:[],
				shopList:[],
				shop_id:0,
				shopIndex:-1,
				appIndexAd:[],
				appIndexAdIndex:0,
		};
	},
	onShareAppMessage(res) {
	    if (res.from === 'button') {// 来自页面内分享按钮
	      console.log(res.target)
	    }
	  },
		onLoad() {
			// beeApp.alert("yiqwyei");
			// this.getLeastUrls();
		this.loadStore();
		beeApp.getUserInfo((userInfo)=>{
			 this.userInfo = userInfo;
			 
		  })
		  this.load();
		 this.getAppIndexAd();
		 },
		 onPullDownRefresh() {
		 	this.load();
		 	uni.stopPullDownRefresh();
		 },

		methods: {
			loadStore() {
				if(window && window.location){
					 var search = beeApp.GetRequest(window.location.search);
					 if(search.title){
						 uni.setNavigationBarTitle({
						 	title:search.title
						 })
					 }
				}
				
			},
			jumpCuIconList: function(e) {
				console.log(e);
				var index = e.currentTarget.dataset.key;
				var url = this.cuIconList[index].url;
				uni.navigateTo({
					url: url
				})
				 
			},
			
			jumpSubIconList:function(e) {
				console.log(e);
				var index = e.currentTarget.dataset.key;
				var url = this.leastUrls[index].url;
				if(url){
					uni.navigateTo({
						url: url
					})
				}else{
					beeApp.alert("正在对接服务，敬请期待！");
				}
				
			},
			  jump:function(type,id){
                if(type=='vote'){
					uni.navigateTo({
						url:"/pages/topic/topic_vote?id="+id
					})			
               }else if(type=='event'){
				   uni.navigateTo({
						url:"/pages/topic/topic_event?id="+id
					})	
			   }else{
                    uni.navigateTo({
						url:"/pages/topic/detail?id="+id
					})	
                }
            },
			load: function() {
				this.getrecommend("99", 2, (data) => {
					this.listData1 = data;
				});
				this.getrecommend("100", 5, (data) => {
					this.listData2 = data;
				});
				this.shop_id = uni.getStorageSync("shop_id");
				this.getShopList();
			},
			
			getrecommend(pid, limit, fu) {
				var that = this;

				beeApp.api("sns/topic/list", {
					page: 1,
					pid: pid,
					limit: limit,
					order: 'id desc',
				}, function(res) {

					if (res.code != 200) {
						beeApp.alert(res.msg);
						return;
					}
					fu(res.data.list);
				})
			},
			setIndexSwiper(e){
				 // console.log(e);
				 this.appIndexAdIndex = e.detail.current;
			},
			jumpAppIndexAd(e){
				var index =  this.appIndexAdIndex;
				var url = this.appIndexAd[index].url;
				// 支付宝
				if(url && beeApp.data.app_type=="alipay"){
					my.ap.navigateToAlipayPage({
						path:url,
						success:(res) => {
							// my.alert({content:'系统信息' + JSON.stringify(res)});
						},
						fail:(error) => {
							my.alert({content:'错误信息' + JSON.stringify(error)});        
						}
					})
				}
			},


		getrecommend(pid, limit, fu) {
			var that = this;

			beeApp.api(
				'sns/topic/list',
				{
					page: 1,
					pid: pid,
					limit: limit,
					order: 'id desc'
				},
				function(res) {
					if (res.code != 200) {
						beeApp.alert(res.msg);
						return;
					}
					fu(res.data.list);
				}
			);
		},
		setIndexSwiper(e) {
			// console.log(e);
			this.appIndexAdIndex = e.detail.current;
		},
		jumpAppIndexAd(e) {
			var index = this.appIndexAdIndex;
			var url = this.appIndexAd[index].url;
			// 支付宝
			if (url && beeApp.data.app_type == 'alipay') {
				my.ap.navigateToAlipayPage({
					path: url,
					success: res => {
						// my.alert({content:'系统信息' + JSON.stringify(res)});
					},
					fail: error => {
						my.alert({ content: '错误信息' + JSON.stringify(error) });
					}
				});
			}
		},
		getAppIndexAd() {
			var that = this;

			beeApp.api(
				'apiv2/app_index_url/get_addon_blocks_image',
				{
					blocks_name: 'appIndexAd'
				},
				function(res) {
					if (res.code != 200) {
						beeApp.alert(res.msg);
						return;
					}
					that.appIndexAd = res.data;
				}
			);
		},
		pickerChangeShop: function(e) {
			var shopIndex = e.detail.value;
			console.log(shopIndex);
			if (shopIndex > -1) {
				this.shop_id = this.shopList[shopIndex].id;
				uni.setStorageSync('shop_id', this.shop_id);
			}
			this.shopIndex = shopIndex;
		},
		// 门店列表
		getShopList: function() {
			var that = this;
			beeApp.api(
				'mall/shop/get',
				{
					type: 'tenement'
				},
				function(res) {
					if (res.code != 200) {
						beeApp.alert(res.msg);
						return;
					}
					var shopList = res.data.list;
					var shopNameList = [];
					var curIndex = -1;
					for (var i in shopList) {
						shopNameList.push(shopList[i].name);
						if (that.shop_id == shopList[i].id) {
							curIndex = i;
						}
					}
					that.shopList = shopList;
					that.shopIndex = curIndex;
					that.shopNameList = shopNameList;
				}
			);
		}
	}
};
</script>

<style>

	.menu-list {
		box-shadow: 0px 3px 0px #eee;
		width: 96%;
		border-radius: 5%;
		margin-top: -70upx;
		position: absolute;
		left: 2%;
		white-space: nowrap;
		background-color: #fff;
		padding: 10upx 0;
	}

	.least-recently-used {
		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}

	.least-recently-used .used-item {
		display: inline-block;
		width: 25%;
		text-align: center;
		padding: 15upx 0;
	}

	.least-recently-used .used-item image {
		width: 50upx;
		height: 50upx;
	}

	.used-item3 {
		display: inline-block;
		width: 25%;
		text-align: center;
		padding: 15upx 0;

	}

	.used-item3 image {
		width: 80upx;
		height: 80upx;
	}

	.aui-row-title {
		padding: 20rpx 0px 0px 40rpx;
	}

	.notiBox {
		box-shadow: 0px 3px 0px #eee;
		border-radius: 5%;
		border: 1px solid #eee;
		margin: 10px;
	}

	.screen-swiper {
		min-height: 300upx;
		height: 300upx;
	}

	.least-recently-used .used-item2 {
		display: inline-block;
		width: 80%;
		box-shadow: 0px 3px 0px #eee;
		border-radius: 5%;
		border: 1px solid #eee;

		margin: 0 5px;

	}

	.least-recently-used .used-item2 image {
		width: 100upx;
	}

	.used-item2 image {
		width: 100upx;
	}


	.footer .l-line,
	.footer .r-line,
	.footer .footer-content {
		float: left;
		color: #888;
	}

	.footer {
		width: 560upx;
		margin: 0 auto;
		margin-top: 40upx;
	}

	.footer .l-line,
	.footer .r-line {
		width: 68upx;
		border-bottom: 1px solid #888;
		margin-top: 60upx;
	}

	.footer-content {
		padding: 40upx 10upx;
	}
</style>
